<template>
    <div>
        <h4>quill富文本编辑器</h4>
        <quillEditor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption" 
            @blur="onEditorBlur($event)" 
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
        />
    </div>
</template>
<script>

import { quillEditor } from 'vue-quill-editor'
import { addQuillTitle } from '@/utils/quill-title.js'
import { toolbarList } from '@/utils/quill-toolbar.js'

//Cannot read property 'imports' of undefined 报错处理
export default {
    components:{quillEditor},
    data(){
        return {
            content:'',//编辑器内容
            editorOption:{
                placeholder:'请输入...',
                modules:{
                    // 拖动加载图片组件。
                    imageDrop: true, 
                    //调整大小组件。
                    imageResize: { 
                        displayStyles: {
                            backgroundColor: 'black',
                            border: 'none',
                            color: 'white'
                        },
                        modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
                    },
                    // 工具栏
                    toolbar: {
                        container: toolbarList,
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                },
                
            }
        }
    },
    mounted(){
        addQuillTitle();
    },
    methods:{
        //失去焦点事件
        onEditorBlur(e){
            this.$emit('onEditorBlur',e)
        },
        //获得焦点事件
        onEditorFocus(e){
            this.$emit('onEditorFocus',e)
        },
        //内容改变事件
        onEditorChange(e){
            this.$emit('onEditorChange',e)
        }
    }
}
</script>